<template>
  <div class="m-25 mt-65 agora">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>评分内容</h2>
        </div>
      </div>

      <!-- 搜索 -->
      <Card style="margin-bottom: 10px;">
        <div class="normal-list-page-hd clearfix">
            <Button custom-icon="iconfont icon-fangkuai2" type="primary" size="small" style="float:right"  @click="creata">新建任务</Button>
            <Input class="mr-10" v-model="queryData.standardId" placeholder="编号" :clearable=true style="width: 200px"/>
            <Select class="mr-10" v-model="queryData.taskStatus" style="width:150px;" :clearable=true placeholder="任务状态">
                <Option value="1">未接受</Option>
                <Option value="2">已完成</Option>
                <Option value="3">待完成</Option>
            </Select>
            <Button class="mr-10" type="primary" custom-icon="iconfont icon-chaxun" size="small" @click="getTableData">查找</Button>
        </div>
        </Card>

      <div class="normal-box-bd">
        <div class="normal-list-page-mod">
          <div class="normal-list-page-bd">
            <Table
              border
              :columns="list.columns"
              :data="list.tableData"
            ></Table>
          </div>
          <div>
            <Page
              :total="queryData.totalRecord"
              :page-size="queryData.limit"
              :current="queryData.page"
              show-total
              show-elevator
              @on-change="changePage"
            ></Page>
            <span style="float: right;">共{{queryData.totalRecord}}条数据</span>
          </div>
        </div>
      </div>

      <!--新建/修改用户-->
        <Modal v-model="creaUp.modal1" :title="creaUp.title" :loading="creaUp.loading" @on-ok="sendPost">
          <Form ref="check" :model="creaUp.data" :label-width="80" :rules="creaUp.rules">
            <FormItem label="编号" prop="standardId">
              <Input placeholder="请输入" v-model="creaUp.data.standardId" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="考核对象" prop="assessmentObject">
              <Input placeholder="请输入" v-model="creaUp.data.assessmentObject" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="任务类型" prop="taskType">
              <Input placeholder="请输入" v-model="creaUp.data.taskType" :disabled='disabled' style="width:300px;"/>
            </FormItem>
            <FormItem label="* 考核时间" prop="assessmentTime">
              <DatePicker v-model="creaUp.data.assessmentTime" :value="creaUp.data.assessmentTime" type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="* 截止时间" prop="endTime">
              <DatePicker v-model="creaUp.data.endTime" :value="creaUp.data.endTime" type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="任务状态" prop="taskStatus">
              <Select v-model="creaUp.data.taskStatus" style="width:300px">
                  <Option value="1">未接受</Option>
                  <Option value="2">已完成</Option>
                  <Option value="3">已过期</Option>
              </Select>
            </FormItem>
          </Form>
        </Modal>
    </div>
  </div>
</template>
<script>
import gcDispenserApi from "@/api/base_sys/gcDispenser.js";
import { Message } from "iview";

export default {
  data() {
    return {
      url: "/api/voScore/",

      list: {
        selections: [],
        // 列表展示数据
        tableData: [],
        columns: [
          {
            title: "编号",
            key: "standardId",
            align: "center",
            minWidth: 10,
          },
          {
            title: "考核对象",
            key: "assessmentObject",
            align: "center",
            minWidth: 50,
          },
          {
            title: "任务类型",
            key: "taskType",
            align: "center",
            minWidth: 50,
          },
          {
            title: "考核时间",
            key: "assessmentTime",
            align: "center",
            minWidth: 100,
          },
          {
            title: "创建时间",
            key: "createTime",
            align: "center",
            minWidth: 100,
          },
          {
            title: "截止时间",
            key: "endTime",
            align: "center",
            minWidth: 100,
          },
          {
            title: "任务状态",
            align: "center",
            minWidth: 50,
            render:(h,p)=> {
              let a = p.row.taskStatus
              let r,color
              switch (a) {
                case 1:r = '未接受';color='warning';break;
                case 2:r = '已完成';color='success';break;
                case 3:r = '已过期';color='default';break;
                default: r = a;break;
              }
              return h('Tag',{props:{color: color}},r)
            }
          },
          {
            title: "操作",
            align: "center",
            minWidth:80,
            render:(h,p)=>{
              return h('div',[
                h('i-button',{
                  props: { type: 'default', size: 'small',},
                  style: {margin: '0 3px'},
                  on: {
                      click:()=> {this.updata(p.row.id)}
                  }
                },'编辑'),
                h('i-button',{
                  props: { type: 'error', size: 'small',},
                  style: {margin: '0 3px'},
                  on: {
                      click:()=> {this.dele(p.row.id)}
                  }
                },'删除')
              ])
            }
          },
        ],
      },

      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        standardId: "", // 编号
        taskStatus: "", // 任务状态
      },
      upid: '',
      creaUp: {
        med: '',
        modal1: false,
        loading: false,
        title: '',
        data: {
          // id: '',
          standardId: '',       // 任务名称
          assessmentObject: '', // 任务说明
          taskType: '',         // 任务类型
          assessmentTime: '',   // 考核任务
          endTime: '',          // 截止时间
          taskStatus: '',       // 任务状态
        },
        rules: {   // check
        //   standardId: [{required: true,message: "请填写编号",trigger: "blur"}],
          assessmentObject: [{required: true,message: "请填写考核对象",trigger: "blur"}],
          taskType: [{required: true,message: "请填写任务类型",trigger: "blur"}],
        //   endTime: [{message: "请填写截止时间",trigger: "blur"}],
          taskStatus: [{required: true,message: "请填写任务状态",trigger: "blur"}],
        },
      }
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    // 获取列表
    async getTableData() {
      console.log(this.queryData);
      this.queryData.totalRecord = undefined;
      let result = (await gcDispenserApi.getData(this.url+'page', this.queryData)).data
      console.log("result:", result);
      this.list.tableData = result.list;
      this.queryData.totalRecord = result.totalRecord;
      this.queryData.limit = result.pageSize;
    },
    // 分页切换
    changePage(index) {
      this.queryData.page = index;
      this.getList();
    },
    //查询
    inQuire() {
      this.queryData.page = 1;
      this.getTableData();
    },
    // 更新
    async updata(index) {
      let c = this.creaUp
      c.modal1 = true
      c.med = 'up'
      c.title = '编辑任务'
      this.upid = index
      // c.data.id = index
      let r = (await gcDispenserApi.getData(this.url+index)).data
      c.data.standardId = r.standardId
      c.data.assessmentObject = r.assessmentObject
      c.data.taskType = r.taskType
      c.data.assessmentTime = r.assessmentTime
      c.data.endTime = r.endTime
      c.data.taskStatus = String(r.taskStatus)
      console.log('up',r);
    },
    // 新建
    async creata() {
      let c = this.creaUp
      c.med = 'cr'
      c.modal1 = true
      c.title = '新建任务'
      this.clear()
    },
    async dele(index) {
      // console.log('dele',index);
      let result = await gcDispenserApi.del(this.url+index)
      if(result.data) {
        this.$Message.success("操作成功")
        console.log(result);
        this.getTableData()
      }else {
        console.log(result);
        this.$Message.error(result.message)
      }
    },
    clear() {
      let c = this.creaUp
      c.data.standardId = ''
      c.data.assessmentObject = ''
      c.data.taskType = ''
      c.data.endTime = ''
      c.data.taskStatus = ''
    },
    // 提交数据
    sendPost() {
      let c = this.creaUp
      console.log('提交');
      this.$refs["check"].validate(async valid => {
        if(!valid) {
          console.log('no');
          this.changeLoading()
          return
        }
        else if(valid) {
          console.log(this.url,c.data);
          let data
          switch(c.med) {
            case 'up': data = await gcDispenserApi.update(this.url+this.upid,this.creaUp.data);break;
            case 'cr': data = await gcDispenserApi.add(this.url,this.creaUp.data);break;
            default: this.$Message.error('这种错误不可能出现');break;
          }
          let result = data.data
          let message = data.message
          if(result) {
            console.log('!!!');
            this.$Message.success("操作成功")
            console.log(result);
            this.getTableData()
            c.modal1 = false
            return
          }else {
            console.log(result);
            this.$Message.error(message)
          }

        }

      })
    },
    // 改变load状态
    changeLoading() {
      this.creaUp.modal1 = false;
      this.$nextTick(() => {
        this.creaUp.modal1 = true;
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>
